<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.common.dev.min.js"></script> -->
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        // vue演示
        // var vm = new Vue({
        //     el:'#app',
        //     data:{
        //         message:'数据'
        //     }
        // })
        // console.log((vm.$data));

        //注意:本文没有用数据进行渲染,所以没有改data里的数据 


        // 一、在指定范围内渲染数据,初次渲染
        var data = {
            message: "测试数据",
        }
        var APPEle = document.querySelector("#app")
        var strTest = APPEle.innerHTML;
        //在指定范围内查找{{message}}字符
        // 正则的()[]{}
        // ()分租,[集合],{}
        // ^表示以..开头
        // 集合里的^表示取反
        // ?:0-∞,+:1到∞
        var reg = /\{\{([^{}]+)\}\}/;
        // 尝试匹配
        if (reg.test(strTest)) {
            // 拿到reg的第一个分组
            var $1 = RegExp.$1;
            // 注意这里用的是[]获取对象的方法,$1是个字符串
            var message = data[$1];
            console.log(message);
            APPEle.innerHTML = APPEle.innerHTML.replace(reg,message);
        }

        // 二、再次渲染

        //把数据观察起来
        // 用val暂存数据,防止死循环
        var val = data['message']
        Object.defineProperty(data, "message", {
            get: function () {
                return val
            },
            set: function (newValue) {
                if (val != newValue) {
                    // 打印下旧数据
                    var oldvalue = message;
                    APPEle.innerHTML = APPEle.innerHTML.replace(oldvalue, newValue)
                    message = APPEle.innerHTML//更新message用以渲染
                }
            },
            configurable: true,
            enumerable: true,
        })
    </script>
</body>

</html>